<template>
 <!-- 好友详情展示区 -->
  <div v-if="friendItem && chatType === 0" class="friendDetail">
    <div class="container">
      <div class="top">
        <div class="left">
          <div class="img-area">
            <img :src="friendData.avatar" />
          </div>
          <div class="content">
            <div class="comment-name">
              <span style="margin-right: 10px;">{{friendData.nickname}}</span>
              <svg-icon v-if="friendData.sex == 0" icon-class="male" />
              <svg-icon v-if="friendData.sex == 1" icon-class="female" />
            </div>
            <div class="hobby">爱好： {{friendData.hobby}}</div>
            <div class="mood">心情： {{friendData.mood}}</div>
          </div>
        </div>
        <div class="right">
          <el-dropdown trigger="click">
            <MoreFilled class="more-icon" />
            <template #dropdown>
              <el-dropdown-menu style="width: 120px;">
                <el-dropdown-item
                  style="padding:10px 0px; font-size: 12px;display: flex; justify-content: center;"
                  @click="gotoChat"
                >
                  发消息
                </el-dropdown-item>
                <el-dropdown-item
                  style="padding:10px 0px; font-size: 12px;display: flex; justify-content: center;color: red;"
                >
                  删除
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
      <el-divider />
      <div class="center">
        <div class="item">
          <span class="title">昵称</span>
          <span class="name">{{friendData.nickname}}</span>
        </div>
        <div class="item">
          <span class="title">标签</span>
          <span class="content">家人, 可见人</span>
        </div>
      </div>
      <el-divider />
      <div class="bottom">
        <el-button type="success" @click="gotoChat">发送消息</el-button>
      </div>
    </div>
  </div>
  <!-- 群聊详情展示区 -->
  <div v-if="friendItem && chatType == 1" class="group">
    <div class="top">
      <span>{{friendItem.group_name}} ({{groupUserNumber}})</span>
    </div>
    <el-scrollbar style="height: 80%;width: 74%;margin: 0 auto;">
      <div class="content">
        <div v-for="item in groupUserList" class="menber_item">
          <img :src="item.avatar" />
          <span>{{item.nickname}}</span>
        </div>
      </div>
    </el-scrollbar>
     <div class="bottom">
      <el-button type="success" @click="gotoChat">发消息</el-button>
    </div>
  </div>
  <!-- 未选中好友或群聊展示区 -->
  <div v-if="!friendItem" class="noChat">
    <div class="icon">
      <svg-icon icon-class="duihua" class="duihua" />
    </div>
    <div class="content">
      <span style="opacity: .3;">请选择一个会话</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { MoreFilled } from '@element-plus/icons-vue'
import {onMounted, watch, ref, reactive } from 'vue'
import {userController, newsController} from '@/api/index.js'

const props = defineProps({
  friendItem: Object,
  chatType: Number // 1 群聊  0 指定好友
})



const emit=defineEmits(['changeChat'])
const friendItem = ref(null)
const chatType = ref(null)
// 编辑备注input对象
const noteNameValue = ref(null)
// 是否展示编辑备注input
const showInput = ref(false)
// 保存用户数据
const friendData = reactive({
  user_id: null, // 用户id
  avatar: null,  // 头像
  username: null, // 用户名
  nickname: null, // 昵称
  chatType: null,
  // sex: null,  // 性别
  // tagName: null, // 标签
  // hobby: null, // 爱好
  // mood: null // 心情
})
// 保存群组数据
const groupData = reactive({
  user_id: null,
  group_id: null,
  avatar: null,
  nickname: null,
  chatType: null
})
// 保存群成员数据
const groupUserList = ref([])
const groupUserNumber = ref(null)


watch(props, (newValue, oldValue)=> {
  console.log('传进来的值')
  console.log(newValue)
  friendItem.value = newValue.friendItem
  chatType.value = newValue.chatType
  if(chatType.value === 0) {
    friendData.chatType = 0
    getFriendDetail(friendItem.value.user_friend_id)
  } else {
    groupUserList.value.length = 0
    groupData.user_id = friendItem.value.group_id
    groupData.avatar = friendItem.value.group_head
    groupData.nickname = friendItem.value.group_name
    groupData.group_id = friendItem.value.group_id
    groupData.chatType = 1
    getGroupUserList(friendItem.value.group_id)
  }
}, {deep: true})


// 根据id获取用户数据
const getFriendDetail = async (id) => {
  const res = await userController.getUserDetail({user_id: id})
  const {app_user_id, avatar, username, sex, nickname, hobby, mood} = res.data.data
  if(res.data.code === 200) {
    friendData.user_id = app_user_id
    friendData.avatar = avatar
    friendData.nickname = nickname
    friendData.username = username
    // friendData.sex = sex
    // friendData.hobby = hobby
    // friendData.mood = mood
  }
}
// 根据组id获取群成员列表
const getGroupUserList = async (id) => {
  const res = await newsController.getGroupUserList({group_id: id})
  if(res.data.code === 200) {
    groupUserNumber.value = res.data.data.number
    res.data.data.group_member_list.forEach(item => {
      groupUserList.value.push(item)
    });
  }
  console.log('组成员数据')
  console.log(groupUserList.value)
}

// 展示编辑input
// const editTagName = () => {
//   showInput.value = true
//   setTimeout(() => {
//     tagNameInputRef.value.focus()
//   }, 0);
// }
// 当输入框失去焦点时触发
// const blurFocus = (value) => {
//   showInput.value = false
// }
// 当输入框的值改变（失去焦点或按下enter时触发）
// const changeValue = (value) => {
//   console.log(value)
//   showInput.value = false
//   friendData.noteName = noteNameValue.value
// }

// 进入聊天详情页
const gotoChat = () => {
  if(chatType.value === 1) {
    emit('changeChat', groupData)
  } else {
    emit('changeChat', friendData)
  }
}

</script>

<style lang="scss" scoped>
.friendDetail {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  .container {
    // border: 1px solid blue;
    width: 450px;
    height: 450px;
    .top {
      display: flex;
      justify-content: space-between;
      // border: 1px solid red;
      height: 28%;
      margin-bottom: 10px;
      .left {
        display: flex;
        margin: 15px;
        .img-area {
          width: 90px;
          height: 90px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .content {
          margin-left: 20px;
          .name, .hobby, .mood {
            margin-top: 6px;
            font-size: 14px;
            opacity: .5;
          }
          .comment-name {
            margin-bottom: 12px;
            font-size: 22px;
            opacity: .8;
          }
        }
      }
      .right {
        .more-icon {
          width: 20px;
          height: 20px;
          opacity: .4;
          margin-right: 20px;
          margin-top: 20px;
        }
      }
    }
    .center {
      margin-top: 25px;
      height: 22%;
      // border: 1px solid red;
      .item {
        display: flex;
        align-items: center;
        margin-left: 20px;
        height: 40px;
        .edit-icon {
          display: none;
          margin-left: 10px;
          opacity: .6;
        }
        .title {
          opacity: .4;
          width: 70px;
          font-size: 15px;
        }
        .content {
          margin-left: 15px;
          font-size: 14px;
        }
        .name-input {
          width: 100%;
        }
      }
      .item:hover .edit-icon {
        display: block;
        margin-left: 10px;
        opacity: .6;
      }
    }
    .bottom {
      display: flex;
      justify-content: center;
      margin-top: 60px;
    }
  }
}
.noChat {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background-color: #F4F5F7;
    .duihua {
      width: 80px;
      height: 80px;
    }
  }
  .content {
    width: 200px;
    line-height: 35px;
    text-align: center;
    border-radius: 20px;
    margin-top: 10px;
    background-color: #F4F5F7;
  }
}
.group {
  height: 100%;
  position: relative;
  background-color: #F5F5F5;
  .top {
    display: flex;
    align-items: center;
    height: 10%;
    width: 100%;
    border-bottom: 1px solid #E6E6E6;
    span {
      font-size: 20px;
      font-weight: bold;
      margin-left: 30px;
      letter-spacing: 2px;
    }
  }
  .content {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    // border: 1px solid red;
    margin: 5px auto;
    .menber_item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 80px;
      height: 115px;
      margin: 5px 15px;
      img {
        width: 55px;
        height: 55px;
      }
      span {
        font-size: 15px;
        opacity: .3;
        width: 100%;
        text-align: center;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
        margin-top: 15px;
        margin-bottom: 18px;
      }
    }
    .menber_item:hover {
      background-color: #E6E6E6;
    }
  }
  .bottom {
    position: absolute;
    bottom: 10px;
    left: 50%;
    .el-button {
      width: 120px;
    }
  }
}
.el-divider--horizontal {
  margin: 0;
}
</style>
